<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>订单结算</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../css/layui.css" media="all">
		<script src="../js/jquery.min.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<!-- 顶部导航栏 -->
		<header class="header" id="header"></header>

		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this">订单确认</li>
			</ul>
		</div>

		<table class="layui-table" lay-skin="line">
			<colgroup>
				<col width="150">
				<col width="200">
				<col>
			</colgroup>
			<thead style="margin: 10px ;">
				<tr>
					<th colspan="6">订单号：<label id="onumber" th:text="${orderNumber}"></label></th>
				</tr>
			</thead>
			<thead>
				<tr>
					<th>房间图片</th>
					<th>房间类型</th>
					<th>房间价格</th>
					<th>折后价格</th>
					<th>入住日期</th>
					<th>天数</th>
				</tr>
			</thead>
			<tbody>
				<tr style="height: 100px;" th:each="room : ${rooms}">
					<td><img th:src="@{/img/{imgpath}(imgpath=${room.imgpath})}"></td>
					<td th:text="${room.rtname}"></td>
					<td id="rtid" th:text="${room.rtid}" style="display:none"></td>
					<td id="uid" th:text="${uid}" style="display:none"></td>
					<td id="rprice" th:text="${room.rprice}"></td>
					<td id="newprice" th:text="${newprice}"></td>
					<td id="starttime" th:text="${starttime}"></td>
					<td id="daynum" th:text="${daynum}"></td>
				</tr>
				<tr style="height: 40px;">
					<td colspan="5" style="text-align: center;font-size: 18px;font-weight: 700px;">折后总价：￥<span id="totalprice" th:text="${totalprice}"></span></td>
				</tr>
				<tr style="height: 40px;">
					<td colspan="2">选择住客信息:
					</td>
					<td colspan="2">
						<span id="guestInf" th:each="zkinf : ${guest}">
							<input type="radio" name="zk" id="zk" th:value="${zkinf.gid}" checked="checked"/>姓名：<label th:text="${zkinf.gname}"></label>&nbsp;&nbsp;&nbsp;&nbsp;身份证号：<label th:text="${zkinf.gidcard}"></label><br>
						</span>
					</td>
					<td colspan="2" style="text-align: left;">
						<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
							<button data-method="notice" class="layui-btn">新&nbsp;&nbsp;&nbsp;增</button>
						</div>
					</td>
				</tr>
				<tr style="height: 60px;">
					<td colspan="2">预计到达时间：</td>
					<td colspan="2">
					<div class="layui-form" style="width: 300px">
						<select name="arrtime" id="arrival" lay-verify="" >
 							<option th:value="${starttime}+' 12:00:00'">请选择入住时间</option>
  							<option  th:value="${starttime}+' 14:00:00'">14:00</option>
 							<option  th:value="${starttime}+' 16:00:00'">16:00</option>
 							<option  th:value="${starttime}+' 18:00:00'">18:00</option>
 							<option  th:value="${starttime}+' 20:00:00'">20:00</option>
 							<option  th:value="${starttime}+' 22:00:00'">22:00</option>
 							<option  th:value="${starttime}+' 24:00:00'">24:00</option>
						</select>  
					</div>   
					</td>
					<td colspan="2" style="text-align: left;">
					<!-- <input type="button" onclick="qwe()" value="测试"> -->
					</td>
				</tr>
				<tr style="height: 80px;">
					<td colspan="2">备注：</td>
					<td colspan="3">
					<div class="layui-form" style="width: 500px;">
						<textarea name="" id="message" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
					</div>   
					</td>
					<td colspan="1" style="text-align: left;">
					</td>
				</tr>
				<tr style="height: 60px;">
					<td colspan="2">下单时间：<label id="ostart" th:text="${time}"></label></td>
					<td colspan="2">订单状态：未支付</td>
					<td colspan="2" style="text-align: left;">
						<button type="button" id="zf1" value="立即支付" class="layui-btn" onclick="createOrderAndPay()">立即支付</button>
						<button type="button" id="zf2" value="到店支付" class="layui-btn" onclick="createOrder()">到店支付</button>
						<a href="http://localhost:8080/index.html" class="layui-btn layui-btn-danger">取&nbsp;&nbsp;&nbsp;消</a>
					</td>
				</tr>
			</tbody>
		</table>





		<script src="../layui.js" charset="utf-8"></script>
		
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		
		<script type="text/javascript">
         function WebSocketTest(){
     		var ws = null;
     		//连接服务器
        	var url = "ws://192.168.40.228:8080/WebSocketHandler/";
     		var userName = $("#uid").text();
     		url = url + userName; //传递用户名
     		//创建对象，连接服务器
     		ws=new WebSocket(url);
     		//给ws对象绑定事件
     		//连接事件
     		ws.onopen = function(){
     			console.info("连接服务器成功");
     		}
     		//接收到消息
     		ws.onmessage = function(result){
     			alert(result.data);
     		}
     		//关闭连接
     		ws.onclose = function(){
     			console.info("断开连接");
     		}
     		
     		$("#zf1").click(function(){
     			var message=$("#onumber").text();
     			if(ws!=null){
     				ws.send(message); //发送消息
     			}
     		})
     		
     		$("#zf2").click(function(){
     			var message=$("#onumber").text();
     			if(ws!=null){
     				ws.send(message); //发送消息
     			}
     		})
     			
     		//断开连接
     		$("#cancel").click(function(){
     			if(ws!=null){
     				ws.close();
     			}
     		});
         }
      </script>
		
		
		<script>
		$(function(){
		      $.ajax({
		         type:"get",
		         url:"/header.html",
		         async:true,
		         success:function(data){
		            $("#header").html(data);
		         }
		      });
		      WebSocketTest();
		   });
		
		function createOrder(){
			alert("正在生成订单...");
			$.ajax({
				url:"/order/createOrder",
				type:"post",
				data:{
					onumber:$("#onumber").text(),
					totalprice:$("#totalprice").text(),
					rprice:$("#rprice").text(),
					newprice:$("#newprice").text(),
					starttime:$("#starttime").text(),
					daynum:$("#daynum").text(),
					arrival:$("#arrival option:selected").val(),
					message:$('#message').val(),
					rtid:$("#rtid").text(),
					gid:$("input[name='zk']:checked").val(),
					opay:"线下支付"
				},
				success:function(data){
					alert(data);
					//web();
					//跳转首页
					location.href="http://localhost:8080/index.html";
			}				
			}); 
		};
		
		function createOrderAndPay(){
			alert("正在生成订单...");
			$.ajax({
				url:"/order/createOrder",
				type:"post",
				data:{
					onumber:$("#onumber").text(),
					totalprice:$("#totalprice").text(),
					rprice:$("#rprice").text(),
					newprice:$("#newprice").text(),
					starttime:$("#starttime").text(),
					daynum:$("#daynum").text(),
					arrival:$("#arrival option:selected").val(),
					message:$('#message').val(),
					rtid:$("#rtid").text(),
					gid:$("input[name='zk']:checked").val(),
					opay:"线上支付"
				},
				success:function(data){
					alert(data);
					if(data.indexOf("成功")){
						//支付
						location.href='http://localhost:8080/pay/pay';
					}
			}				
			}); 
		};
		
		function qwe(){
			alert($('#rprice').text());		
			alert($('#newprice').text());
		};
		layui.use('layer', function(){ //独立版的layer无需执行这一句
  		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
  
  //触发事件
  var active = {
    setTop: function(){
      var that = this; 
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '当你选择该窗体时，即会在最顶端'
        ,area: ['390px', '260px']
        ,shade: 0
        ,maxmin: true
        ,offset: [ //为了演示，随机坐标
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ] 
        ,content: '//layer.layui.com/test/settop.html'
        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
        ,yes: function(){
          $(that).click(); 
        }
        ,btn2: function(){
          layer.closeAll();
        }
        
        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      });
    }
    ,confirmTrans: function(){
      //配置一个透明的询问框
      layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
        time: 20000, //20s后自动关闭
        btn: ['明白了', '知道了', '哦']
      });
    }
    ,notice: function(){
      //示范一个公告层
      layer.open({
        type: 2
        ,title: false //不显示标题栏
        ,closeBtn: true
        ,area: ['550px', '350px']
        ,shade: 0.8
		,shadeClose: true
		,anim: 4
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
       /* ,btn: ['新增', '取消'] */
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '/addInf_gjf.html'
        ,end: function(){
        	window.location.reload();
        }
        ,success: function(layero){
          var btn = layero.find('.layui-layer-btn');
          btn.find('.layui-layer-btn0').attr({
            href: 'http://www.layui.com/'
            ,target: '_blank'
          });
        }
      });
    }
    ,offset: function(othis){
      var type = othis.data('type')
      ,text = othis.text();
      
      layer.open({
        type: 1
        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
        ,btn: '关闭全部'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
    }
  };
  
  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });
  
});
			//页码
			layui.use(['laypage', 'layer'], function() {
				var laypage = layui.laypage,
					layer = layui.layer;
				laypage.render({
					elem: 'demo1',
					count: 70 //数据总数
						,
					jump: function(obj) {
						console.log(obj)
					}
				});
				laypage.render({
					elem: 'demo2',
					count: 70 //数据总数
						,
					jump: function(obj) {
						console.log(obj)
					}
				});
			});

			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});


			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		</script>

	</body>
</html>
